import React,{Component} from 'react';
import {View, Text, StyleSheet, SafeAreaView, TouchableWithoutFeedback} from 'react-native'
import {Container,Header,Tab,Tabs,ScrollableTab,TabContainer,Button,CheckBox,List, ListItem,Separator,Content,Form, Item, Input, Label, Toast } from 'native-base'
import ImagePicker from 'react-native-image-crop-picker'
import {update,range} from 'ramda'
import {loginGo} from '../api/api'
import {storage} from '../utils/storage'
import LoginActions from '../store/actions/LoginActions'
import {connect} from 'react-redux'
import { bindActionCreators } from 'redux';


class LoginScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username:'',
            password:''
        }
    }

    chooseImage = ()=> {
        console.log('[test Ramda]',update(1,'_',['a','s','d']))
        console.log('[test range]',range())
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        }).then(image => {
            console.log(image);
        })
    }

    shouldComponentUpdate(nextProps) {
        if(nextProps.isSuccess) {
            Toast.show({text: "111",buttonText: "222",position: "top"})
            this.props.navigation.navigate('Practice')
        }
        return true
    }

    login = ()=> {
        console.log('[username]',this.state.username)
        console.log('[password]',this.state.password)
        let data = {'loginName':this.state.username,'password':this.state.password}
        let result = this.props.login(data)
        console.log('[result]',result)
        //     .then(result => {
        //     console.log('[result]',result)
        //     if(result) {
        //         Toast.show({text: "111",buttonText: "222",position: "top"})
        //         storage.save('token',result.token)
        //         this.props.navigation.navigate('Practice')
        //     }else {
        //         Toast.show({text: "账号密码错误！",buttonText: "确定",position: "top"})
        //     }
        // }).catch(err => {
        //     Toast.show({text: "账号密码错误！",buttonText: "确定",position: "top"})
        // })
        // let result = await loginGo(form)
    }

    render() {
        return (
            <SafeAreaView style={styles.login_container}>
                <View style={styles.login_box}>
                    <Form style={{ alignItems: 'center',justifyContent:'center',backgroundColor:'#fff', borderRadius:5, overflow:'hidden', }}>
                        <Item  inlineLabel>
                            <Label style={styles.form_label}>用户名</Label>
                            <Input style={styles.form_input} placeholder='请输入' placeholderTextColor='#ddd'
                                   onChangeText={(text) => this.setState({username:text})} value={this.state.username} />
                        </Item>
                        <Item inlineLabel last>
                            <Label style={styles.form_label}>密码</Label>
                            <Input style={styles.form_input} placeholder='请输入' placeholderTextColor='#ddd' secureTextEntry={true}
                                   onChangeText={(text) => this.setState({password:text})} value={this.state.password} />
                        </Item>

                    </Form>
                    <View style={styles.form_btns}>
                        <Button style={styles.form_btn} onPress={this.login} ><Text style={styles.white} >立即登陆</Text></Button>
                    </View>

                </View>

            </SafeAreaView>
        )
    }
}
export default connect(state => ({token:state.LoginReducer.loginData.token,isSuccess:state.LoginReducer.loginData.isSuccess}),dispatch => ({login:bindActionCreators(LoginActions.login,dispatch)}))(LoginScreen)

const styles = StyleSheet.create({
    login_container:{
        flex:1,
        backgroundColor:'#fc0',
        justifyContent:'center',

    },
    login_box:{
        padding:30,
    },
    form_label:{
        width:80,
        color:'#fc0',
    },
    form_btns:{
        marginTop:40,
        flexDirection: 'row',
        alignItems:'center',
        justifyContent:'center',
    },
    form_btn:{
        flex:1,
        backgroundColor:'#0abe73',
        justifyContent:'center',
        borderRadius:40,
    },
    form_input:{
    },
    white:{
        fontSize:18,
        color:'#fff',
    },
})